<template>
  <div>
    <h2>组合API-ref操作DOM或组件</h2>
    <hr>
    <!-- 2.绑定ref属性 -->
    <div ref='target'>你好</div>
    <ul>
      <li :ref='setDom' v-for='item in fruits' :key='item.id'>{{item.name}}</li>
    </ul>
    <button @click='handleClick'>点击</button>
  </div>
</template>
<script>
import { ref } from 'vue'

export default {
  name: 'App',
  setup () {
    // 1. 定义一个变量
    const target = ref(null)
    const fruits = ref([{
      id: 1,
      name: 'apple'
    }, {
      id: 2,
      name: 'peach'
    }, {
      id: 3,
      name: 'orange'
    }])
    // 批量绑定DOM
    const list = ref([])
    const setDom = (ele) => {
      // 参数ele表示其中一个DOM元素
      list.value.push(ele)
    }

    const handleClick = () => {
      // 3.通过target操作DOM元素
      // console.log(target.value.innerHTML)
      console.log(list.value[1].innerHTML)
    }
    return { target, handleClick, fruits, setDom }
  }
}
</script>
